<html>
    <head>
        <title>商品管理系统</title>
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/icon.css">
        <!--<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/demo/demo.css">-->
        <style type="text/css">
            #fm{
                margin:0;
                padding:10px 10px;
            }
            .search-item{
                float:left;
                margin-right:5px;
                width:20%;
            }
            .search-item label{
                width:20%;
            }
            .edit-item{
                margin-bottom:5px;
            }
            .edit-item label{
                display:inline-block;
                width:80px;
            }
            .c6{
                background: #57b9ee;
            }
            .c5{
                background: #1dd01b;
            }
        </style>
        <script type="text/javascript" src="jquery-easyui-1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="goods.js"></script>
    </head>
    <body>
        <div id="p" class="easyui-panel" title="商品管理" style="width:1300px;height:200px;padding:10px;margin-bottom: 10px;">
            <form id="search-form" novalidate>
                <div style="height:40px;width:100%;">
                    <div class="search-item">
                        <label>商品编码:</label>
                        <input name="goodsNo" class="easyui-textbox">
                    </div>
                    <div class="search-item">
                        <label>商品类别:</label>
                        <select  class="easyui-combobox"
                                 name="category" style="width:70%;"
                                 data-options="
                                url:'/goodsCategory/getAll',
                                method:'get',
                                valueField:'id',
                                textField:'name',
                                panelHeight:'auto'"></select>
                        <!--<input name="name" class="easyui-validatebox" required="true">-->
                    </div>
                    <div class="search-item">
                        <label>商品名称:</label>
                        <input name="name" class="easyui-textbox">
                    </div>
                    <div class="search-item">
                        <label>商品库存:</label>
                        <input name="quantity" class="easyui-numberbox" data-options="min:0,precision:0">
                    </div>
                </div>
                <div style="height:40px;">
                    <div class="search-item">
                        <label>商品价格:</label>
                        <input name="price"  class="easyui-numberbox" data-options="min:0,precision:2">
                    </div>
                    <div class="search-item">
                        <label>商品状态:</label>
                        <select class="easyui-combobox" name="status" style="width:70%;">
                            <option value="">所有</option>
                            <option value="有货">有货</option>
                            <option value="缺货">缺货</option>
                        </select>
                    </div>
                    <div class="search-item">
                        <label>创建人&nbsp;:</label>
                        <input name="createBy"  class="easyui-textbox">
                    </div>
                    <div class="search-item">
                        <label>创建时间:</label>
                        <input name="createTime"  class="easyui-datetimebox">
                    </div>
                </div>
                <div style="width:100%;">
                    <div style="float:right;">
                    <a href="#" class="easyui-linkbutton c5" style="width:80px" onclick="exportExcel()">导出</a>
                    <a href="#" class="easyui-linkbutton c6" style="width:80px" onclick="searchGoods()">查询</a>
                    <a href="#" class="easyui-linkbutton" style="width:80px" onclick="reset()">重置</a>
                    </div>
                </div>
            </form>
        </div>
        <table id="dg" title="商品列表" class="easyui-datagrid" style="width:1300px;height:350px"
               toolbar="#toolbar" pagination="true"
               rownumbers="true" fitColumns="true" singleSelect="true">
            <thead>
            <tr>
                <th field="goodsNo" width="450">商品编号</th>
                <th field="name" width="200">商品名称</th>
                <th field="categoryName" width="150">商品类别</th>
                <th field="quantity" width="150">商品库存</th>
                <th field="price" width="150">商品价格</th>
                <th field="status" width="150">商品状态</th>
                <th field="createBy" width="150">创建人</th>
                <th field="createTime" width="250">创建时间</th>
            </tr>
            </thead>
        </table>
        <div id="toolbar">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addGoods()">新建商品</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editGoods()">修改商品</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeGoods()">删除商品</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-tip" plain="true" onclick="viewGoods()">查看商品</a>
        </div>

        <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
             closed="true" buttons="#dlg-buttons">
            <form id="fm" method="post" novalidate>
                <div class="edit-item">
                    <label>商品类别:</label>
                    <select  class="easyui-combobox"
                             name="category" style="width:52%;"
                             data-options="
                                url:'/goodsCategory/getAll',
                                method:'get',
                                valueField:'id',
                                textField:'name',
                                panelHeight:'auto'"></select>
                </div>
                <div class="edit-item">
                    <label>商品名称:</label>
                    <input name="name" class="easyui-textbox"  data-options="required:true">
                </div>
                <div class="edit-item">
                    <label>商品库存:</label>
                    <input name="quantity" class="easyui-numberbox" data-options="required:true,min:0,precision:0">
                </div>
                <div class="edit-item">
                    <label>商品价格:</label>
                    <input name="price"  class="easyui-numberbox" data-options="min:0,precision:2">
                </div>
            </form>
        </div>
        <div id="dlg-buttons">
            <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveGoods()">保存</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
        </div>

        <div id="info-dialog" class="easyui-dialog" style="width:600px;height:380px;padding:10px 20px"
             closed="true" buttons="#info-buttons">
            <table id="info-table">
                <tr>
                    <td style="width:20%">商品编号:</td>
                    <td><span id="info-goodsNo"></span></td>
                </tr>
                <tr>
                    <td style="width:20%">商品名称:</td>
                    <td><span id="info-name"></span></td>
                </tr>
                <tr>
                    <td style="width:20%">商品类别:</td>
                    <td><span id="info-categoryName"></span></td>
                </tr>
                <tr>
                    <td style="width:20%">商品库存:</td>
                    <td><span id="info-quantity"></span></td>
                </tr>
                <tr>
                    <td style="width:20%">商品价格:</td>
                    <td><span id="info-price"></span></td>
                </tr>
                <tr>
                    <td style="width:20%">商品状态:</td>
                    <td><span id="info-status"></span></td>
                </tr>
                <tr>
                    <td style="width:20%">创建人:</td>
                    <td><span id="info-createBy"></span></td>
                </tr>
                <tr>
                    <td style="width:20%">创建时间:</td>
                    <td><span id="info-createTime"></span></td>
                </tr>
            </table>
        </div>
        <div id="info-buttons">
            <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#info-dialog').dialog('close')">关闭</a>
        </div>
    </body>
</html>